<template>
  <div class="components-container">
    <sweet-modal ref="dialog" class="dialog" v-bind:blocking="blockings" v-bind:hideCloseButton="hideCloseButtons">
      <h3>{{ title }}</h3>
      <div style=" height:300px; margin:30px 50px" id="wrap">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">业务编号</label>
            <div class="layui-input-inline">
               <!-- @keyup.enter.native="dataAdd" --> 
              <!-- <input id="focus" class="inputstyle" v-model="REGNO" placeholder="请输入业务编号" @blur="dataAdd" v-focus="focusState"></input> -->
              <el-input v-model="REGNO" placeholder="请输入业务编号" @keyup.enter.native="dataAdd"></el-input>
            </div>
          </div>
          <el-button type="primary"  @click="callnum">叫号</el-button>
          <el-button type="primary"  @click="reset">重置</el-button>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">编号确认</label>
            <div class="layui-input-inline">
              <!-- @keyup.enter.native="receive" -->
              <!-- <input class="inputstyle" v-model="REGNOS" placeholder="请输入业务编号" @blur="receives"> -->
              <el-input v-model="REGNOS" placeholder="请输入业务编号" @keyup.enter.native="djreceives">
              </el-input>
            </div>
          </div>
          <div class="layui-inline" v-if="this.isshowWarn"> <span style="color:red;font-size:12px;">数据错误！！</span>  </div>
          <div class="layui-inline" v-if="this.isshowWarns"> <span style="color:red;font-size:12px;">{{ diename }}取灰成功！！</span>  </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">逝者姓名</label>
              <div class="layui-input-inline">
              <el-input v-model="regData.REGNAME" readonly></el-input>
              </div>
              <label class="layui-form-label">联系人</label>
              <div class="layui-input-inline">
              <el-input v-model="regData.REGHANDLERNAME" readonly></el-input>
              </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">联系电话</label>
              <div class="layui-input-inline">
              <el-input v-model="regData.REGHANDLERLINK" readonly></el-input>
              </div>
              <label class="layui-form-label">备注</label>
              <div class="layui-input-inline">
              <el-input  v-model="regData.REGREMARK" readonly></el-input>
              </div>
            </div>
        </div>
      </div>
      <div class="layui-form-item btnCenter">
        <el-button @click="closeDialog">取消</el-button>
        <!-- <el-button type="primary"  @click="submit">提交</el-button> -->
      </div>
    </sweet-modal>
    <sweet-modal ref="receive" class="dialog">
      <h3>{{ title }}</h3>
      <div style=" height:300px; margin:30px 50px">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">业务编号</label>
            <div class="layui-input-inline">
              <el-input v-model="REGNO" placeholder="请输入骨灰盒上业务编号" @keyup.enter.native="getDetailByBussnum">
              <el-button slot="append" icon="el-icon-search" @click="getDetailByBussnum"></el-button>
              </el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item" v-if="order === '领取'">
          <div class="layui-inline">
            <label class="layui-form-label">编号确认</label>
            <div class="layui-input-inline">
              <el-input v-model="checkREGNO" placeholder="请输入领取单上业务编号"  @keyup.enter.native="checkNO"></el-input>
            </div>
            <el-button type="primary" @click="checkNO">校验</el-button>
          </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">逝者姓名</label>
              <div class="layui-input-inline">
              <el-input v-model="regData.REGNAME" readonly></el-input>
              </div>
              <label class="layui-form-label">联系人</label>
              <div class="layui-input-inline">
              <el-input v-model="regData.REGHANDLERNAME" readonly></el-input>
              </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">联系电话</label>
              <div class="layui-input-inline">
              <el-input v-model="regData.REGHANDLERLINK" readonly></el-input>
              </div>
              <label class="layui-form-label">备注</label>
              <div class="layui-input-inline">
              <el-input  v-model="regData.REGREMARK" readonly></el-input>
              </div>
            </div>
        </div>
      </div>
      <div class="layui-form-item btnCenter">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" :disabled="isChecked"  @click="submit" :loading="this.$store.state.isloading">提交</el-button>
      </div>
    </sweet-modal>
    <sweet-modal ref="info" class="dialog">
      <h3>{{ title }}</h3>
      <div style=" height:300px; margin:30px 50px">
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">逝者姓名</label>
              <div class="layui-input-inline">
              <el-input v-model="tshData.REGNAME" readonly></el-input>
              </div>
              <label class="layui-form-label">业务编号</label>
              <div class="layui-input-inline">
              <el-input v-model="tshData.REGBUSNUM" readonly></el-input>
              </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">发布日期</label>
              <div class="layui-input-inline">
              <el-input v-model="tshData.TSHADDDATEDESC" readonly></el-input>
              </div>
              <label class="layui-form-label">发布时间</label>
              <div class="layui-input-inline">
              <el-input  v-model="tshData.TSHADDTIMEDESC" readonly></el-input>
              </div>
            </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">取灰日期</label>
            <div class="layui-input-inline">
              <el-input v-model="tshData.TSHTAKDATEDESC" readonly></el-input>
            </div>
            <label class="layui-form-label">取灰时间</label>
            <div class="layui-input-inline">
              <el-input v-model="tshData.TSHTAKTIMEDESC" readonly></el-input>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">发布经办</label>
            <div class="layui-input-inline">
              <el-input v-model="tshData.TSHADDPSN" readonly></el-input>
            </div>
            <label class="layui-form-label">取灰经办</label>
            <div class="layui-input-inline">
              <el-input v-model="tshData.TSHTAKPSN" readonly></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item btnCenter">
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </sweet-modal>
  </div>
</template>

<style  rel="stylesheet/scss" lang="scss" scoped>
@import "src/styles/common.scss";
.inputstyle{
  border:1px solid #dcdfe6;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  padding: 0 15px;
  color: #606266;
  font-size: inherit;
  width: 100%;
}
</style>
<script>
import sweetModal from "@/components/sweetModal";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";

const ADD = "登记";
const DELETE = "删除";
const RECEIVE = "领取";
const CALRECEIVE = "取消领取";
const INFO = "详情";
export default {
  data() {
    return {
      blockings:true,
      hideCloseButtons:true,
      title: null,
      order: null,
      REGNO: null,
      REGNOS: null,
      checkREGNO: null,
      THSID: null,
      regData: {
        REGNAME: null,
        REGHANDLERNAME: null,
        REGHANDLERLINK: null,
        REGREMARK: null
      },
      tshData: {},
      isChecked: true,
      isshowWarn: false,
      isshowWarns: false,
      focusState: true,
      diename: null
    };
  },
  methods: {
    //重置
    reset(){
      var txts = wrap.getElementsByTagName("input");
      txts[0].focus();
      this.REGNO =  null;
      this.REGNOS = null;
      this.isshowWarn = false;
      this.isshowWarns = false;
      this.regData.REGNAME = null;
      this.regData.REGHANDLERNAME = null;
      this.regData.REGHANDLERLINK = null;
      this.regData.REGREMARK = null;

      this.checkREGNO = null
    },
    //叫号
    callnum(){
      if(this.regData.REGREMARK){
        for(var i = 0;i < 3;i++){
          this.sound(this.regData.REGREMARK);
        }
      }
    },
    //取灰登记
    dataAdd() {
      // this.focusState = false
      if(this.REGNO === null) return;
      var txts = wrap.getElementsByTagName("input");
      txts[1].focus();
      // setTimeout(()=>{
        let data = {
          // TSHREGID: this.regData.REGID
          TshBussnum: this.REGNO
        };
        apiBase.DoService(data, apiBase.getApiAdress().Takeash.Create, res => {
           if (res.data.content) {
              var tshdata = res.data.content;
              this.regData.REGNAME = tshdata.REGNAME;
              this.regData.REGHANDLERNAME = tshdata.REGHANDLERNAME;
              this.regData.REGHANDLERLINK = tshdata.REGHANDLERLINK;
              this.regData.REGREMARK = tshdata.TSHDESC;
              this.THSID = tshdata.TSHID;
            };
          if(res){
            for(var i = 0;i < 3;i++){
              this.sound(res.data.content.TSHDESC);
            }
          }
          // this.$refs.dialog.close();
          this.$message({
            type: "success",
            message: "登记成功!"
          });
          // this.refreshData();
        });
      // },300)
    },
    //取灰详情
    dataInfo() {
      let data = {
        TSHID: this.THSID
      };
      apiBase.DoService(data, apiBase.getApiAdress().Takeash.Detail, res => {
        this.tshData = res.data.content;
      });
    },
    //取灰删除
    dataDelete() {
      this.$confirm("确认是否删除取灰信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(callback => {
          let data = {
            TSHID: this.THSID
          };
          apiBase.DoService(
            data,
            apiBase.getApiAdress().Takeash.Delete,
            res => {
              this.$refs.dialog.close();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.refreshData();
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //骨灰领取
    receives() {
      if(this.checkREGNO === null) return;
      this.diename = this.checkREGNO;
    
          let data = {
            TshBussnum: this.checkREGNO
          };
          apiBase.DoService(
            data,
            apiBase.getApiAdress().Takeash.Receive,
            res => {
                this.reset();
                this.isshowWarn = false;
                this.isshowWarns = true;
                this.$message({
                  type: "success",
                  message: "领取成功!"
                });
                this.refreshData();
            },
            error => {
              this.isshowWarn = true;
              this.isshowWarns = false;
              this.checkREGNO = null
            }
          );
    },
    // 登记中的骨灰领取
    djreceives() {
      if(this.REGNOS === null) return;
      this.diename = this.REGNOS;
    
          let data = {
            TshBussnum: this.REGNOS
          };
          apiBase.DoService(
            data,
            apiBase.getApiAdress().Takeash.Receive,
            res => {
                this.reset();
                this.isshowWarn = false;
                this.isshowWarns = true;
                this.$message({
                  type: "success",
                  message: "领取成功!"
                });
            },
            error => {
              this.isshowWarn = true;
              this.isshowWarns = false;
              this.REGNOS = null
            }
          );
    },
    //取消领取
    calReceive() {
      this.$confirm("确认是否取消领取?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(callback => {
          let data = {
            TSHID: this.THSID
          };
          apiBase.DoService(
            data,
            apiBase.getApiAdress().Takeash.CancelReceive,
            res => {
              this.$refs.dialog.close();
              this.$message({
                type: "success",
                message: "取消领取成功!"
              });
              this.closeDialog();
              this.refreshData();
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //根据业务编号获取骨灰信息
    getDetailByBussnum() {
      if (this.REGNO === null) {
        this.$message({
          message: "请输入业务编号",
          type: "warning"
        });
      } else {
        let data = {
          REGBUSSNUM: this.REGNO
        };
        apiBase.DoService(
          data,
          apiBase.getApiAdress().Takeash.GetDetailByBussnum,
          res => {
            if (res.data.content) {
              var tshdata = res.data.content;
              this.regData.REGNAME = tshdata.REGNAME;
              this.regData.REGHANDLERNAME = tshdata.REGHANDLERNAME;
              this.regData.REGHANDLERLINK = tshdata.REGHANDLERLINK;
              this.regData.REGREMARK = tshdata.TSHDESC;
              this.THSID = tshdata.TSHID;
            }
          }
        );
      }
    },
    //校验业务编号
    checkNO() {
      if (this.REGNO && this.checkREGNO) {
        this.getDetailByBussnum();
        if (this.REGNO === this.checkREGNO) {
          this.$message({
            message: "校验成功",
            type: "success"
          });
          this.isChecked = false;
        } else {
          this.$message({
            message: "业务编号不一致！",
            type: "error"
          });
        }
      } else {
        this.$message({
          message: "请输入或扫描骨灰盒与领取单上的业务编号",
          type: "warning"
        });
      }
    },
    //功能操作
    open(order, id) {
      this.dataRepeat();
      this.order = order;
      this.THSID = id;
      switch (this.order) {
        case ADD:
          this.title = "登记";
          this.$refs.dialog.open();
          setTimeout(() => {
            var txts = wrap.getElementsByTagName("input");
            txts[0].focus();
          }, 100);
          break;
        case DELETE:
          this.dataDelete();
          break;
        case RECEIVE:
          this.title = "骨灰领取";
          this.$refs.receive.open();
          break;
        case CALRECEIVE:
          this.title = "取消领取";
          this.isChecked = false;
          this.$refs.receive.open();
          break;
        case INFO:
          this.dataInfo();
          this.$refs.info.open();
          break;
        default:
      }
    },
    //提交
    submit() {
      this.$store.state.isloading = true;
;      switch (this.order) {
        case ADD:
          this.dataAdd();
          break;
        case RECEIVE:
          this.receives();
          break;
        case CALRECEIVE:
          this.calReceive();
          break;
        default:
      }
    },
    sound(val){
      var num = val.indexOf(' ');
      var vals = val.slice(num);
      if(this.isIE()){
          this.zhText = encodeURI(encodeURI(vals));
          this.voicebbUrl = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=3&text="+this.zhText;
          this.$refs.voiceads.play();
      }else{
        var msg = new SpeechSynthesisUtterance(vals);
        msg.lang = 'utf-8';
        msg.volume = 1;//音量，0-1默认为1
        msg.rate = 1;//控制语速的
        msg.pitch = 1;//表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。
        window.speechSynthesis.speak(msg);
      }
    
    },
    isIE() { //ie?
      if (!!window.ActiveXObject || "ActiveXObject" in window)
        return true;
        else
        return false;
      },
    //数据重置
    dataRepeat() {
      Object.assign(this.$data, this.$options.data());
    },
    refreshData() {
      this.$emit("refreshData");
    },
    closeDialog() {
        this.REGNO === null;
        this.$refs.dialog.close();
        this.$refs.receive.close();
        this.$refs.info.close();
        this.refreshData();
    }
  },
  //  directives: {
  //   focus: {
  //     update: function (el, {value}) {
  //       if (value) {
  //         el.focus()
  //       }
  //     }
  //   }
  // },
  
  components: {
    sweetModal
  }
};
</script>

